﻿@model ProductAttributeConditionModel
@{
    Layout = "";
    ViewBag.Title = Loc["Admin.Catalog.Products.ProductAttributes.Attributes.Condition"];
}
<form id="ProductAttributeConditionPopup" asp-area="@Constants.AreaAdmin" asp-controller="Product" asp-action="ProductAttributeConditionPopup" enctype="multipart/form-data" method="post"
      asp-route-ProductId="@HtmlExtensions.HtmlEncodeSafe(Context.Request.Query["ProductId"])"
      asp-route-productAttributeMappingId="@HtmlExtensions.HtmlEncodeSafe(Context.Request.Query["ProductAttributeMappingId"])"
      asp-route-btnId="@HtmlExtensions.HtmlEncodeSafe(Context.Request.Query["btnId"])"
      asp-route-formId="@HtmlExtensions.HtmlEncodeSafe(Context.Request.Query["formId"])">


    <div asp-validation-summary="All"></div>
    <input asp-for="ProductId" type="hidden"/>

    <div class="row">
        <div class="col-md-12">
            <div class="x_panel light form-fit">
                <div class="x_title">
                    <div class="caption">
                        <i class="fa fa-cubes"></i>
                        @Loc["Admin.Catalog.Products.ProductAttributes.Attributes.Condition"]
                    </div>
                </div>
                <div class="note note-info">
                    @Loc["Admin.Catalog.Products.ProductAttributes.Attributes.Condition.Description"]
                </div>
                <div class="x_content form">
                    <div class="form-horizontal">
                        <div class="form-body">
                            <div class="form-group">
                                <admin-label asp-for="EnableCondition" class="col-sm-3 control-label"/>
                                <div class="col-md-9 col-sm-9">
                                    <label class="mt-checkbox mt-checkbox-outline control control-checkbox">
                                        <admin-input asp-for="EnableCondition"/>
                                        <div class="control__indicator"></div>
                                    </label>
                                    <span asp-validation-for="EnableCondition"></span>
                                </div>
                            </div>
                            <div class="form-group" id="pnlAttributes">
                                @if (Model.ProductAttributes.Count > 0)
                                {
                                    var attributesList = new List<SelectListItem>();
                                    foreach (var attribute in Model.ProductAttributes)
                                    {
                                        attributesList.Add(new SelectListItem { Text = attribute.Name, Value = attribute.Id });
                                    }

                                    <div class="form-horizontal">
                                        <div class="form-body">
                                            <div class="form-group" id="pnlBasepriceUnit">
                                                <admin-label asp-for="SelectedProductAttributeId" class="col-sm-3 control-label"/>
                                                <div class="col-md-9 col-sm-9">
                                                    <admin-select asp-for="SelectedProductAttributeId" asp-items="@(attributesList)"/>
                                                    <script>
                                                        
                                                            $("#@Html.IdFor(model => model.SelectedProductAttributeId)").change(toggleProductAttributes);

                                                            toggleProductAttributes();
                                                        

                                                        function toggleProductAttributes() {
                                                            var selectedProductAttributeId = $("#@Html.IdFor(model => model.SelectedProductAttributeId)").val();
                                                            $('[id^="pnl_attribute_values_"]').hide();
                                                            $('#pnl_attribute_values_' + selectedProductAttributeId).show();
                                                        }
                                                    </script>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 col-md-3"></label>
                                                <div class="col-md-9 col-sm-9">
                                                    @foreach (var attribute in Model.ProductAttributes)
                                                    {
                                                        var controlId = $"attributes[{attribute.Id}]";
                                                        <div id="@($"pnl_attribute_values_{attribute.Id}")">
                                                            @switch (attribute.AttributeControlType)
                                                            {
                                                                case AttributeControlType.DropdownList:
                                                                {
                                                                    <select class="form-control" name="@(controlId)" id="@(controlId)">
                                                                        @if (!attribute.IsRequired)
                                                                        {
                                                                            <option value="">---</option>
                                                                        }
                                                                        @foreach (var attributeValue in attribute.Values)
                                                                        {
                                                                            <option selected="@attributeValue.IsPreSelected" value="@attributeValue.Id">
                                                                                @attributeValue.Name
                                                                            </option>
                                                                        }
                                                                    </select>
                                                                }
                                                                    break;
                                                                case AttributeControlType.RadioList:
                                                                case AttributeControlType.ColorSquares:
                                                                case AttributeControlType.ImageSquares:
                                                                {
                                                                    <ul style="list-style-type: none;">
                                                                        @foreach (var attributeValue in attribute.Values)
                                                                        {
                                                                            <li>
                                                                                <input id="@(controlId)" type="radio" name="@(controlId)" value="@attributeValue.Id" checked="@attributeValue.IsPreSelected"/>
                                                                                <label for="@(controlId)">@attributeValue.Name</label>
                                                                            </li>
                                                                        }
                                                                    </ul>
                                                                }
                                                                    break;
                                                                case AttributeControlType.Checkboxes:
                                                                {
                                                                    <ul style="list-style-type: none;">
                                                                        @foreach (var attributeValue in attribute.Values)
                                                                        {
                                                                            <li>
                                                                                <input id="@(controlId)" type="checkbox" name="@(controlId)" value="@attributeValue.Id" checked="@attributeValue.IsPreSelected" @(attribute.AttributeControlType == AttributeControlType.ReadonlyCheckboxes ? Html.Raw(" disabled=\"disabled\"") : null)/>
                                                                                <label for="@(controlId)">@attributeValue.Name</label>
                                                                            </li>
                                                                        }
                                                                    </ul>
                                                                }
                                                                    break;
                                                                case AttributeControlType.ReadonlyCheckboxes:
                                                                case AttributeControlType.TextBox:
                                                                case AttributeControlType.MultilineTextbox:
                                                                case AttributeControlType.Datepicker:
                                                                case AttributeControlType.FileUpload:
                                                                default:
                                                                    break;
                                                            }
                                                        </div>
                                                    }
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                }
                                else
                                {
                                    <div class="note note-info">No attribute exists that could be used as condition</div>
                                }
                            </div>
                            <div class="form-actions">
                                <div class="row">
                                    <div class="offset-md-3 offset-sm-3 col-md-9 col-sm-9">
                                        <button class="btn btn-success" type="submit" name="save">
                                            <i class="fa fa-check"></i> @Loc["Admin.Common.Save"]
                                        </button>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
            var mfp = $.magnificPopup.instance;
            $("#ProductAttributeConditionPopup").submit(function (e) {
                e.preventDefault();
                var form = $(this);
                var url = form.attr('action');
                $.ajax({
                    type: "POST",
                    url: url,
                    data: form.serialize(),
                    success: function (data) {
                        if (data == "") {
                            mfp.close();
                            $('#btnRefreshProductAttributes').click();
                        } else {
                            $.magnificPopup.open({
                                items: {
                                    src: data,
                                    type: 'inline'
                                },
                                callbacks: {
                                    open: function () {
                                        $('.mfp-wrap').removeAttr('tabindex');
                                    }
                                }
                            });
                        }
                    }
                });
            });
        
            function toggleEnableCondition() {
                if ($('#@Html.IdFor(model => model.EnableCondition)').is(':checked')) {
                    $('#pnlAttributes').show();
                } else {
                    $('#pnlAttributes').hide();
                }
            }

           $("#@Html.IdFor(model => model.EnableCondition)").click(toggleEnableCondition);

           toggleEnableCondition();
    </script>

</form>